<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .seckill {
        display: flex;
        flex-wrap: wrap;
        margin: 10px;
      }
      .seckill img{
        width: 100px;
      }
      span {
        width: 60px;
        height: 30px;
        margin: 10px;
        background-color: antiquewhite;
      }
      .cuxiao img{
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="hot-keywords">
      <!-- <span></span> -->
    </div>

    <div class="seckill">
      <!-- <img src="" alt="" />
      <div></div>
      <div></div> -->
    </div>

    <div class="cuxiao">
      <div></div>
      <img src="" alt="" />
      <div></div>
    </div>
  </body>
  <script>
    function getHOTKeyWords() {
      let url = "http://106.52.75.114/api/v2/hot/keywords";
      let xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.send();
      xhr.onload = function () {
        if (xhr.status == 200) {
          console.log(xhr.responseText);
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          let str = "";
          obj.data.list.forEach((v) => {
            v;
            str += `<span>${v}</span>`;
          });
          document.querySelector(".hot-keywords").innerHTML = str;
        }
      };
    }
    getHOTKeyWords();

    function getSeckill() {
      let url = "http://106.52.75.114/api/seckill/index";
      let xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.send();
      xhr.onload = function () {
        if (xhr.status == 200) {
          console.log(xhr.responseText);
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          let str = "";
          obj.data.seckillTime.forEach((v) => {
            v;
            str += `<img src="${v.slide}" alt="">
                   <div>${v.state}</div>
                <div>${v.status}</div>`;
          });
          document.querySelector(".seckill").innerHTML = str;
        }
      };
    }
    getSeckill();

    function getCuXiao() {
      let url = "http://106.52.75.114/api/home/products";
      let xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.send();
      xhr.onload = function () {
        if (xhr.status == 200) {
          console.log(xhr.responseText);
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          let str = "";
          obj.data.list.forEach((v) => {
            v;
            str += ` <div>${v.store_name}</div>
                   <img src="${v.image}" alt="">
                  <div>${v.price}</div>`;
          });
          document.querySelector(".cuxiao").innerHTML = str;
        }
      };
    }
    getCuXiao();
  </script>
</html>
